<template>
  <div class="title flex flex-jc-sp">
    <div class="flex">
      <template v-if="titleStr !== ''">
        <h3 class="text active" :style="`font-size: ${fontSize}px;`">
          {{ titleStr }}
        </h3>
      </template>
      <template v-else>
        <h3
          class="text"
          :class="{ active: value === item.value ? true : false }"
          v-for="item in titleArr"
          :key="item.value"
          @click="tapTag(item.value)"
        >
          {{ item.label }}
        </h3>
      </template>
    </div>
    <div class="right">
      <slot name="control"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fontSize: {
      type: Number,
      default: 36,
    },
    titleStr: {
      type: String,
      default: '',
    },
    titleArr: {
      type: Array,
      default: () => [{ label: 'TITLE', value: 1 }],
    },
  },
  data() {
    return {
      value: 0,
    }
  },
  watch: {
    titleArr: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.value = newVal[0].value
        }
      },
    },
  },
  methods: {
    tapTag(value) {
      this.value = value
      this.$emit('change', { cate_id: value })
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  padding-bottom: 34px;
  .text {
    margin-right: 48px;
    color: #999;
    cursor: pointer;
    &.active {
      color: #000;
      font-weight: bold;
    }
  }
}
</style>